<template>
  <view class="content">
    <view class="input-group">
      <view class="input-row border">
        <text class="title">账号：</text>
        <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
      </view>
      <view class="input-row border">
        <text class="title">密码：</text>
        <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
      </view>
      <view class="input-row">
        <text class="title">服务器：</text>
        <m-input class="m-input" type="text" clearable focus v-model="server" placeholder="服务器地址"></m-input>
      </view>
    </view>
    <view class="btn-row">
      <button type="primary" class="primary" @tap="bindLogin">登录</button>
    </view>
  </view>
</template>

<script>
  import service from '../../service.js'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import mInput from '../../components/m-input.vue'
  import md5 from 'js-md5'

  export default {
    components: {
      mInput
    },
    data() {
      return {
        server: 'http://192.168.3.27:8080',
        account: '',
        password: '',
        positionTop: 0,
        isDevtools: false,
      }
    },
    computed: mapState(['forcedLogin']),
    methods: {
      ...mapMutations(['login']),
      initPosition() {
        /**
         * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
         * 反向使用 top 进行定位，可以避免此问题。
         */
        this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
      },
      bindLogin() {
        /**
         * 客户端对账号信息进行一些必要的校验。
         * 实际开发中，根据业务需要进行处理，这里仅做示例。
         */
        if (this.account.length < 2) {
          uni.showToast({
            icon: 'none',
            title: '账号最短为 2 个字符'
          });
          return;
        }
        if (this.password.length < 3) {
          uni.showToast({
            icon: 'none',
            title: '密码最短为 3 个字符'
          });
          return;
        }
        /**
         * 下面简单模拟下服务端的处理
         * 检测用户账号密码是否在已注册的用户列表中
         * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
         */
        const data = {
          account: this.account,
          password: this.password
        };
        let validUser = false
        uni.request({
          url: this.server + '/api/oauth/token',
          data: {
            username: this.account,
            password: md5(this.password),
            grant_type: 'password'
          },
          method: 'post',
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic Z2F0ZTpndWFyZA=='
          },
          success: (res) => {
            if (res.statusCode !== 200) {
              uni.showToast({
                icon: 'none',
                title: '用户账号或密码不正确',
              });
            } else {
              service.setToken(res.data.access_token);
              service.setServer(this.server)
              this.toMain(this.account);
            }
          }
        });
      },
      getUserInfo({
        detail
      }) {
        if (detail.userInfo) {
          this.toMain(detail.userInfo.nickName);
        } else {
          uni.showToast({
            icon: 'none',
            title: '登陆失败'
          });
        }
      },
      toMain(userName) {
        this.login(userName);
        /**
         * 强制登录时使用reLaunch方式跳转过来
         * 返回首页也使用reLaunch方式
         */
        if (this.forcedLogin) {
          uni.reLaunch({
            url: '../main/main',
          });
        } else {
          uni.navigateBack();
        }

      }
    },
    onReady() {
      this.initPosition();
      // #ifdef MP-WEIXIN
      this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
      // #endif
    }
  }
</script>

<style>

</style>
